{% extends "../main.html" %}

{% block head %}
    <script src="/javascript/jquery.infinitescroll.min.js" type="text/javascript"></script>
{% endblock %}

{% block breadcrumb %}
<nav>
    <ul id="crumbs">
        <li><a href="/">{{ system_title }}</a></li>
        <li>{{ bubbletype.displayname }}</li>
    </ul>
</nav>
{% endblock %}

{% block content %}

<div id="content">
    <div style="text-align:center; display:block;">
        <a href="/bubbletype/{{ bubbletype.key.id }}" style="padding:10px;">#</a>
        {% for a in abc %}
        <a href="/bubbletype/{{ bubbletype.key.id }}/{{ a }}" style="padding:10px;">{{ a|upper }}</a>
        {% endfor %}
    </div>
    <div class="table" style="margin-bottom:10px;">
        <div class="table_row" style="padding-top:20px;">
            <div class="header_cell" style="width:100%;">
                {{ str.bubble_name }}
            </div>
            <div class="header_cell" style="text-align:center;">
                {{ str.bubble_period }}
            </div>
            <div class="header_cell" style="text-align:center;">
                {{ str.bubble_seeders }}
            </div>
            <div class="header_cell" style="text-align:center;">
                {{ str.bubble_leechers }}
            </div>
            <div class="header_cell" style="text-align:center;">
                {{ str.bubbles }}
            </div>
        </div>
        {% for b in bubbles %}
        <div class="table_row infiniterow" bubble="{{ b.key }}">
            <div class="table_cell">
                <a href="/bubble/{{ b.key.id }}">{{ b.displayname }}</a>
            </div>
            <div class="table_cell" style="white-space:nowrap;">
                {{ b.displaydate }}
            </div>
            <div class="table_cell" style="text-align:center;">
                {{ b.seeders|length }}
            </div>
            <div class="table_cell" style="text-align:center;">
                {{ b.leechers|length }}
            </div>
            <div class="table_cell" style="text-align:center;">
                {{ b.optional_bubbles|length }} + {{ b.mandatory_bubbles|length }}
            </div>
        </div>
        {% endfor %}
    </div>

    {% if show_scroll %}
    <a id="next" href="/bubbletype/{{ bubbletype.key.id }}/{{ letter }}?p={{ next_page }}">Next...</a>
    {% endif %}

</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('.table').infinitescroll({
            navSelector     : 'a#next',
            nextSelector    : 'a#next:last',
            itemSelector    : '.table .infiniterow',
            loadingImg      : '/images/ajax-loader.gif',
            loadingText     : '',
            donetext        : '',
            animate         : false,
            bufferPx        : 400,
        });
    });
</script>

{% endblock %}